<template>
  <div>
    <el-dialog v-model="dialog.visible" :title="dialog.title" :fullscreen="true" destroy-on-close>
      <template #header>
        <div class="flex items-end">
          <div class="title">{{ dialog.title }}</div>
          <div class="flex items-center text-[12px] tips">
            <div class="ml-[10px] label">当前操作帐户：</div>
            <div class="val" :class="appStore.accountName ? 'text-[#409EFF]' : 'text-[#f00]'">{{ appStore.accountName || '未设置' }}</div>
          </div>
        </div>
      </template>
      <template #default>
        <el-container>
          <el-aside width="400px">
            <LeftAside @setComponentType="addComponents" />
          </el-aside>
          <el-main>
            <MainBody :curComponets="curComponets" />
          </el-main>
          <el-aside width="400px">
            <RightAside :curComponets="curComponets" />
          </el-aside>
        </el-container>
        <!-- <div class="flex common-layout" :style="`height:${showHeight}px`">
          <div class="left w-[400px]">
            <LeftAside />
          </div>
          <div class="main">
            <MainBody />
          </div>
          <div class="right w-[400px] bg-[#00f]"></div>
        </div> -->
      </template>

      <template #footer></template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import LeftAside from './left/leftAside.vue';
import MainBody from './main/mainBody.vue';
import RightAside from './right/rightAside.vue';
import { ComponentVO } from '@/api/advertisement/site/types';

const appStore = useAppStore();

const dialog = reactive<DialogOption>({
  visible: false,
  title: '新建站点'
});

const curComponets = ref<ComponentVO>();

const addComponents = (val: ComponentVO) => {
  curComponets.value = val;
};

const show = () => {
  console.log('show');
  dialog.visible = true;
};
const hide = () => {
  dialog.visible = false;
};

defineExpose({ show, hide });
</script>

<style lang="scss" scoped>
::v-deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body) {
  padding: 0 !important;
  height: calc(100vh - 46px) !important;
  max-height: unset !important;
}
::v-deep(.el-overlay .el-overlay-dialog .el-dialog) {
  padding: 0 !important;
}
::v-deep(.el-dialog__footer) {
  display: none !important;
}
.common-layout {
  .left,
  .main,
  .right {
    height: inherit;
  }
  .left {
    -webkit-box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .main {
    width: calc(100vw - 800px);
    background-color: #f4f7f9;
  }
}
.el-main {
  padding: 0 !important;
  background-color: #f4f7f9;
  position: relative;
  z-index: 1;
}
.el-aside {
  -webkit-box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: visible;
  background-color: #fafafa;
  padding: 0 !important;
  margin-bottom: 0 !important;
  height: calc(100vh - 46px) !important;
  position: relative;
  z-index: 2;
}
</style>
